<template>
	<el-dialog v-model="props.show" width="500" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-#000000 font-bold text-18px">
				确认订单
			</div>
		</template>
		<template #default>
			<div class="mt-20px">
				<div class="flex items-center justify-between pl-40px pr-40px mb-40px">
					<div class="flex flex-col items-center">
						<img :src="formCoin.icon" alt="" class="w-40px h-40px">
						<p class="mt-10px mb-10px text-#86909C text-16px">从</p>
						<p class="text-#000000 text-18px">
							<span class="mr-6px">{{ formCoin.content }}</span>
							<span>{{ formCoin.coin }}</span>
						</p>
					</div>
					<div>
						<img src="/transaction/exchange/to-right.svg" alt="" class="w-18px h-18px" />
					</div>
					<div class="flex flex-col items-center">
						<img :src="toCoin.icon" alt="" class="w-40px h-40px">
						<p class="mt-10px mb-10px text-#86909C text-16px">至</p>
						<p class="text-#000000 text-18px">
							<span class="mr-6px">{{ toCoin.content }}</span>
							<span>{{ toCoin.coin }}</span>
						</p>
					</div>
				</div>

				<div class="flex items-center justify-between mb-10px text-16px">
					<p class="text-#86909C">手续费</p>
					<p class="text-#07B175">{{ info.commission }}</p>
				</div>
				<div class="flex items-center justify-between mb-10px text-16px">
					<p class="text-#86909C">支付渠道</p>
					<p class="text-#000000">{{ info.pay }}</p>
				</div>
				<div class="flex items-center justify-between mb-10px text-16px">
					<p class="text-#86909C">类型</p>
					<p class="text-#000000">{{ info.methods }}</p>
				</div>
				<div class="flex items-center justify-between mb-10px text-16px">
					<p class="text-#86909C">兑换汇率</p>
					<div class="text-#000000 flex items-center">
						<span class="mr-4px">{{ info.rate }}</span>
						<img src="/transaction/exchange/change-small.svg" alt="">
					</div>
				</div>
				<div class="w-100% mt-20px h-50px">
					<div class="w-100%  p-10px box-border rounded-4px bg-#FFFDF3" v-if="formCoin.content > '1'">
						<span class="text-#F34E5F">余额不足，请先充值</span>
					</div>
				</div>
				<div class="mt-20px mb-10px">
					<el-button class="w-100% text-18px" type="primary" color="#ECECF0" style="height:50px;color:#86909C;"
					v-if="formCoin.content > '1'">
						确认
					</el-button>
					<el-button class="w-100% text-18px" type="primary" color="#114CEE" style="height:50px;color:#fff;"
					v-else-if="formCoin.content <= '1' && refreshTime == 0"
					@click="setRefreshTime">
						刷新
					</el-button>
					<el-button class="w-100% text-18px" type="primary" color="#114CEE" style="height:50px;color:#fff;"
					v-else @click="sure">
						确认({{ refreshTime }})
					</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
interface IProps {
	show: boolean;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close','sure']);

const close = () => {
	emit('close', false);
}


const sure = () => {
	emit('sure');
}
// form
const formCoin = ref<any>({
	coin: 'BTC',
	icon: '/purchase/btc.svg',
	content: '0.2'
})
// to
const toCoin = ref<any>({
	coin: 'USDT',
	icon: '/purchase/usdt.svg',
	content: '0.23456'
})
// 信息
const info = ref<any>({
	commission: '0手续费',
	pay: '资金账户',
	methods: '市价',
	rate: '1BTC=0.0002323ETH'
})

// 刷新倒计时
const refreshTime = ref<number>(10);
const setRefreshTime = () => {
	refreshTime.value = 10;
	const timer = setInterval(() => {
		refreshTime.value--;
		if (refreshTime.value === 0) {
			clearInterval(timer);
		}
	}, 1000);
}

onMounted(() => {
	setRefreshTime();
})
</script>
<style lang="scss" scoped></style>
